import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom';
import './index.css'
import hearimg from '../../../static/img/Search and Particulars/zishen.png'
import axios from 'axios';
import { message } from 'antd';
export default function Personald() {
    const [count, setcount] = useState({})
    useEffect(() => {
        axios.post('http://localhost:3001/mycenter/personald', { id: 1 }).then((res) => {
            setcount(res.data)
            console.log(res.data);
            document.getElementsByClassName('p-birthday')[0].value=res.data.birthday
            document.getElementsByClassName('p-nickname')[0].value=res.data.ni_name
        })
    }, [])

    function nowsubmit() {
        const ni_name = document.getElementsByClassName('p-nickname')[0].value
        const birthday = document.getElementsByClassName('p-birthday')[0].value
        const infor = { ...count, ni_name, birthday }
        setcount(infor)
        axios.post('http://localhost:3001/mycenter/changePersonald', { ...infor, id: 1 }).then((res) => {
            if (res.data.code === 1) {
                message.success('修改成功')
            }
        })
    }
    return (
        <div>
            <h3 className='tt'>个人资料</h3>
            <div className="p-hear">
                <ul className='clear'>
                    <li>当前头像:</li>
                    <li className='hearimg'><img src={hearimg} alt="" /></li>
                    <li className='p-amend'>修改</li>
                </ul>
            </div>
            <p className='p-infor'>
                <strong >昵称:</strong>
                <input type="text" placeholder={count.ni_name} className='p-nickname' />
            </p>
            <p className='p-infor'>
                <strong >性别:</strong>
                <input className='sexman' type="radio" name="sex" onClick={() => { setcount({ ...count, sex: 1 }) }} checked={count.sex ? true : false} />男 &nbsp;&nbsp;&nbsp;
                <input className='sexwomen' type="radio" name="sex" onClick={() => { setcount({ ...count, sex: 0 }) }} checked={count.sex ? false : true} />女
            </p>
            <p className='p-infor'>
                <strong >生日:</strong>
                <input className='p-birthday' type="date" />
            </p>
            <p className='p-infor'>
                <strong >手机:</strong>
                <input type="text" className='p-phon' value={count.u_phone} disabled />&nbsp;&nbsp;&nbsp;
                <Link to='/mycenter/changephone'>更改手机</Link>
            </p>
            <div className="p-submit" onClick={nowsubmit}>确认提交</div>
        </div>
    )
}
